<template>
    <div class="undermain">
        <van-tabbar v-model="active" active-color='red'>
            <van-tabbar-item>
                <van-icon
                    class="iconfont icon-05"
                    class-prefix="icon"
                    slot="icon"
                    @click="go('home')"
                ></van-icon
                >首页</van-tabbar-item
            >
            <van-tabbar-item>
                <van-icon
                    class="iconfont icon-shangcheng"
                    class-prefix="icon"
                    slot="icon"
                    @click="go('shop')"
                ></van-icon
                >商城</van-tabbar-item
            >
            <van-tabbar-item>
                <van-icon
                    class="iconfont icon-kafei"
                    class-prefix="icon"
                    slot="icon"
                    @click="go('LifeService')"
                ></van-icon
                >生活服务</van-tabbar-item
            >
            <van-tabbar-item>
                <van-icon
                    class="iconfont icon-31wode"
                    class-prefix="icon"
                    slot="icon"
                    @click="go('Mine')"
                ></van-icon
                >我的</van-tabbar-item
            >
        </van-tabbar>
    </div>
</template>
<script>
export default {
    data() {
        return {
            active: activeColor,
        };
    },
    methods:{
        go(page){
            this.$router.replace({name:page})
        }
    },
    props:['activeColor']
}
</script>

<style scoped lang='less'>
.undermain {
    border: solid 1px #fff;
    margin-top: 24px;
    display: block;
}
.van-tabbar {
    height: 100px;
    .van-tabbar-item {
        font-size: 30px;
    }
    .icon-05,
    .icon-shangcheng,
    .icon-kafei,
    .icon-31wode {
        font-size: 40px;
    }
    /deep/ .van-icon {
        font-size: 40px;
    }
}
</style>
